<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-inline{
        margin-bottom: 5px;
    }
    .layui-input-block{
        margin-left: 0px;
    }
    .layui-input{
        width: 200px;
    }
    .layui-table-page{
        display: none;
    }
</style>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">投放总览</a>
            <a><cite>抖音任务台</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form" lay-filter="formData">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">选择小程序：</label>
                    <div id="pVideo" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">计费日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" name="billing_date" placeholder="请选择计费日期" id="billing_date">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">发布时间：</label>
                    <div id="time" style="display: flex;align-items: center;">
                        <div class="layui-input-inline" style="margin-right:10px">
                            <input type="text" autocomplete="off" name="start_time" id="start_date" class="layui-input"
                                placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" name="end_time" id="end_date" class="layui-input"
                                placeholder="结束日期">
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">网站应用key：</label>
                    <div id="pClientList1" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">主播抖音号：</label>
                    <div id="pClientList2" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">第三方小程序：</label>
                    <div id="pClientList3" class="layui-input-inline" style="width:200px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchListTaskVideo">搜索</button>
                    <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
        <table id="getTaskVideo" lay-filter="getTaskVideo"></table>
        <div class="layui-btn-group">
            <button type="button" id="up" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled" onclick="getData('up')">上一页</button>
            <button type="button" id="next" class="layui-btn  layui-btn-primary layui-btn-sm layui-btn-disabled" onclick="getData('next')">下一页</button>
        </div>
    </div>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    </script>
    <script>
        let page = 1;
        let id = GetQueryString('id')
        let douyin_id = GetQueryString('douyin_id')
        let start_time = GetQueryString('start_time')
        let end_time = GetQueryString('end_time')
        let billing_date = GetQueryString('billing_date')
        let client_key = GetQueryString('client_key')
        let third_appid = GetQueryString('third_appid')
        let params = {
            elem: '#getTaskVideo'
            , toolbar: true
            , url: '/admin/tiktok/getTaskVideo' //数据接口
            , id: 'getTaskVideo'
            , page: {
                curr:page
            } , where:{
                id,
                start_time,
                end_time,
                douyin_id,
                billing_date,
                client_key,
                third_appid
            }
            , limit:10000
            , cols: [[ //表头
                { field: 'MicroAppTitle', title: '小程序名称',align:'center' }
                , { field: 'PublishTime', title: '发布时间', align:'center', width:160, templet: function (d) {
                            return dayjsFormat(d.PublishTime)
                        }
                     }
                , { field: 'TaskId', title: '任务ID', width:185, align:'center' }
                , { field: 'TaskName', title: '任务名', width:200, align:'center' }
                , { field: 'VideoId', title: '视频ID', width:180,align:'center' }
                , { field: 'Author', title: '作者', width:135,align:'center' }
                , { field: 'DouyinID', title: '达人抖音ID', width:125,align:'center' }
                , { field: 'VideoLink', title: '视频链接', width:165,align:'center' }
                , { field: 'VideoTitle', title: '视频标题', width:165,align:'center' }
                , { field: 'ActiveCnt1d', title: '当日有效日活用户数<i class="layui-icon iconfont icon-lytishi1" id="ActiveCnt1d"></i>' , width:175,align:'center' }
                , { field: 'AdShareCost1d', title: '广告收入<i class="layui-icon iconfont icon-lytishi1" id="AdShareCost1d"></i>',align:'center' }
                , { field: 'BillingGMV1d', title: '当日交易金额<i class="layui-icon iconfont icon-lytishi1" id="BillingGMV1d"></i>', width:135,align:'center' }
                , { field: 'BillingRefundGMV1d', title: '任务关联的当日退款金额<i class="layui-icon iconfont icon-lytishi1" id="BillingRefundGMV1d"></i>', width:200,align:'center' }
                , { field: 'ClientName', title: '撮合中介名称<i class="layui-icon iconfont icon-lytishi1" id="ClientName"></i>', width:135,align:'center' }
                , { field: 'ExpectedProfit', title: '当日达人佣金', width:125,align:'center' }
                , { field: 'FeedAdShareCost1d', title: 'feed流广告收入<i class="layui-icon iconfont icon-lytishi1" id="FeedAdShareCost1d"></i>', width:145,align:'center' }
                , { field: 'GMV1d', title: '当日视频交易金额<i class="layui-icon iconfont icon-lytishi1" id="GMV1d"></i>', width:160,align:'center' }
                , { field: 'RefundGMV1d', title: '当日退款金额<i class="layui-icon iconfont icon-lytishi1" id="RefundGMV1d"></i>', width:130,align:'center' }
                , { toolbar: '#tbBar', title: '操作', fixed:'right', width: 120,align:'center' }
            ]]
            ,done: function(res, curr, count){
                tips('#ActiveCnt1d','#ActiveCnt1d','当日任务关联的有效日活用户数。仅按日活用户计费的任务视频有值')
                tips('#AdShareCost1d','#AdShareCost1d','当日从视频进入小程序产生的广告收入（平台抽成后的开发者可分成收入，未扣除买量消耗），单位：分')
                tips('#BillingGMV1d','#BillingGMV1d','任务关联的当日交易金额，单位：分。 即根据任务计费规则可以归因到这个视频，并给达人分佣的交易金额。仅支付分成的任务视频有值')
                tips('#BillingRefundGMV1d','#BillingRefundGMV1d','任务关联的交易金额中，当日退款金额，单位：分。 即根据任务计费规则可以归因到这个视频，并给达人分佣的交易金额（已退款）。仅支付分成的任务视频有值')
                tips('#ClientName','#ClientName','撮合中介，可归因到的撮合中介的应用名称。若不归属于任何一个撮合中介，则为空')
                tips('#FeedAdShareCost1d','#FeedAdShareCost1d','当日从feed流看到视频，并进入小程序产生的广告收入（平台抽成后的开发者可分成收入，未扣除买量消耗），单位：分')
                tips('#GMV1d','#GMV1d','当日从视频进入小程序产生的交易金额，单位：分')
                tips('#RefundGMV1d','#RefundGMV1d','从视频进入小程序产生的交易金额中，当日退款金额，单位：分')

                if(res.data.length == 15){
                    $("#next").removeClass('layui-btn-disabled')
                }
                if(page == 1){
                    $("#up").addClass('layui-btn-disabled')
                }
                if(res.data.length != 15 && page != 1){
                    $("#next").addClass('layui-btn-disabled')
                }
            }
            ,parseData:function (res) { //res 即为原始返回的数据
                delDisabled()
                if(res.code == 200){
                    return {
                        "data": res.data, //解析数据列表
                        "code": res.code, //解析接口状态
                        'count':0//解析数据长度
                    };
                }else{
                    layer.msg(res.message,{icon:5,time:1000});
                    return {
                        "data": [], //解析数据列表
                        "code": 200, //解析接口状态
                        'count':0//解析数据长度
                    };
                }
            },
        }
        tableList(params)
        setDisabled()

        layui.use(['laydate','table','form'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var form = layui.form;
            //日期范围
            laydate.render({
                elem: '#time'
                , range: ['#start_date', '#end_date']
                , format: 'yyyy-MM-dd'
            });

            laydate.render({
                elem: '#billing_date' //指定元素
            });

            layui.use('table', function () {
                var table = layui.table;
                table.on('tool(getTaskVideo)', function (obj) {
                    var event = obj.event;
                    let { id,start_time,end_time } = form.val("formData")
                    if (event === 'detail') {
                        x_admin_show('查看详情', `./taskTiktokInfo.html?id=${id}&TaskId=${obj.data.TaskId}&start_time=${start_time}&end_time=${end_time}`, 1200, 730,null);
                    }
                });
            });

            form.on('submit(searchListTaskVideo)', function(data){
                params.where = data.field;
                if(!params.where.id){
                    layer.msg('请先选择小程序', {icon: 5});
                    return false
                }
                if(!params.where.billing_date){
                    layer.msg('请选择计费日期', {icon: 5});
                    return false
                }
                tableList(params)
                setDisabled()
                return false
            });
        });

        let selectVideo = {
            url: '/admin/applet/select?page=1&limit=10000&type=2',
            selected: [],
            tips: '选择小程序',
            name: 'id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pVideo'
        }
        selectN(selectVideo)
        let pClientList1 = {
            url: '/admin/tiktok/selectClientList?type=1',
            selected: [],
            tips: '选择撮合中介',
            name: 'client_key',
            field_id: 'dy_key',
            field_Name: 'name',
            elem: '#pClientList1'
        }
        selectN(pClientList1)
        let pClientList2 = {
            url: '/admin/tiktok/selectClientList?type=2',
            selected: [],
            tips: '选择主播抖音号',
            name: 'douyin_id',
            field_id: 'dy_key',
            field_Name: 'name',
            elem: '#pClientList2'
        }
        selectN(pClientList2)
        let pClientList3 = {
            url: '/admin/tiktok/selectClientList?type=3',
            selected: [],
            tips: '选择第三方小程序',
            name: 'third_appid',
            field_id: 'dy_key',
            field_Name: 'name',
            elem: '#pClientList3'
        }
        selectN(pClientList3)

        function getData(type){
            if($('#'+type).hasClass('layui-btn-disabled')) return;
            if(type == 'up'){
                $("#next").removeClass('layui-btn-disabled')
                page --;
            }else{
                $("#up").removeClass('layui-btn-disabled')
                page ++
            }
            params.page.curr = page;
            tableList(params)
        }

        function setDisabled(){
            $('.layui-form').find('button').each(function(index,item){
                if($(item).attr('lay-filter') == 'searchListTaskVideo'){
                    $(item).attr('disabled',true)
                    $(item).addClass('layui-btn-disabled')
                    $(item).html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>搜索')
                }
            })
        }
        function delDisabled(){
            $('.layui-form').find('button').each(function(index,item){
                if($(item).attr('lay-filter') == 'searchListTaskVideo' ){
                    $(item).attr('disabled',false)
                    $(item).removeClass('layui-btn-disabled')
                    $('.layui-icon-loading').remove()
                }
            })
        }
    </script>
</body>

</html>